import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, message, Anchor, Affix } from 'antd';
import styles from './TaskOption.less';
// activityId=-31&templent=video


@connect(state => ({
  taskScript: state.auction.taskScript,
}))

export default class VideoScript extends PureComponent {
  handleDeliver = (activityId) => {
    this.props.dispatch(routerRedux.push(`/writer/task/create?actType=10&activityId=${activityId}&template=video`));
  }
  handleGetRemainCount = (id) => {
    const { taskScript } = this.props;
    if (taskScript && taskScript.length > 0) {
      let remainCount = '';
      taskScript.forEach(item => {
        item.activityList.find(item1 => {
          if (item1.id === id) {
            remainCount = item1.remainCount;
          }
        });
      });
      return remainCount ? `今天还可投 ${remainCount} 篇` : '';
    }
    return '';
  }
  render() {
    const { taskScript } = this.props;
    return (
      <div>
         {
          taskScript.map( (item, index) =>
            <Card key={index} id={`/creation/writer-create#CHANNELS${index}`} bodyStyle={{ background: '#fff', padding: 20 }} style={{ marginBottom: 20 }}>
              <div className={styles.option_box_top}>
                <div className={styles.option_box_img}>
                  <img src={item.logo} alt={item.name} />
                </div>
                <div className={styles.option_box_detail}>
                  <h3>{item.name}</h3>
                  <div className={styles.option_desc}>{item.desc}</div>
                </div>
              </div>
              <div className={styles.option_children_title}>
                投稿到子频道
              </div>

              <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                {item.activityList.map((item1, index1) => <div key={index1} className={styles.option_choose_box} onClick={() => this.handleDeliver(item1.id)}>
                  <p>{item1.name}</p>
                  <p style={{ fontSize: 12 }}>{this.handleGetRemainCount(item1.id)}</p>
                </div>)}
              </div>
            </Card>
          )
        }
      </div>
    )
  }
}
